<template>
  <div style="height: 100%; overflow:hidden" class="main">
    <!-- <x-header :left-options="{preventGoBack:true,backText: ''}" @on-click-back="backhome">隐患上报<div id="headeright"  @click="dangereport">上报</div></x-header> -->
    <x-header :left-options="{preventGoBack:true,backText: ''}" @on-click-back="backhome">
      质量检查
      <!-- <x-icon id="headeright" type="ios-plus-empty" size="30" @click="dangereport"></x-icon> -->
      <!-- <img slot="right"
           src="@/assets/img/online_start.png"
           @click="dangereport"
           id="headeright"
      v-if="this.qualityArr.includes('0')" />-->
      <img
        slot="right"
        src="@/assets/img/white_change.png"
        class="changeToOffline"
        @click="changeToOffline"
        v-show="flagC"
      />
    </x-header>
    <!-- <div class="add_form"
         @click="dangereport"
    v-if="this.qualityArr.includes('0')">发起</div>-->
    <div class="add_form_new" @click="dangereport" v-if="this.qualityArr.includes('0')">发起</div>
    <group>
      <tab bar-position="bottom">
        <tab-item :selected="flagC" @on-item-click="onCheckClick">检查单</tab-item>
        <tab-item @on-item-click="onRectifyClick" :selected="flagR">整改单</tab-item>
      </tab>
      <div class="sup"></div>
      <!-- <cell is-link link="prjList" v-if="flagC">
        <span slot="title" class="select_pro">{{showPro(pro)}}</span>
      </cell>
      <cell is-link
            link="prjListR"
            v-if="flagR">
        <span slot="title"
              class="select_pro">{{showPro(pmname_back)}}</span>
      </cell>-->
      <select-project
        :title="inspectionTitle"
        formType="inspection"
        module="quality"
        status="view"
        @selectAllPro="selectAllPro"
        @selectPro="selectPro"
        v-show="flagC"
        class="selectPro"
      ></select-project>
      <select-project
        :title="rectifyTitle"
        formType="rectify"
        module="quality"
        status="view"
        @selectAllPro="selectAllPro"
        @selectPro="selectPro"
        v-show="flagR"
        class="selectPro"
      ></select-project>
    </group>
    <div class="sup"></div>
    <div class="main-container" style="overflow:auto;height:86%">
      <v-touch v-on:swiperight="onSwipeRight" :swipe-options="{direction: 'horizontal'}">
        <scroller :on-refresh="refresh" :on-infinite="infinite" ref="taskScroller">
          <!-- <scroller  :on-infinite="infinite" ref="taskScroller"> -->
          <!-- content -->
          <!-- <scroller> -->
          <!-- <div v-bind:class="{check:this.flagC,rectify:this.flagR}"> -->

          <div v-if="flagC">
            <!-- <group v-for="(item, i) in list" gutter="-1px" :key="i">
              <div title :border-intent="false" @click="openInfo(item)">
                <div
                  class="more-box"
                  style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;"
                >
                  <div style="margin-top: 8px;">
                    <span style="display:inline-block">{{item.PROJECTNAME}}</span>
                  </div>
                  <div style="margin-top: 8px;">
                    <span class="gray-label" style="margin-right: 10px;">填写人:</span>
                    {{item.INPUTERFULLNAME}}
                  </div>
                  <div style="margin-top: 8px;">
                    <span class="gray-label" style="margin-right: 5px;">填写时间:</span>
                    {{item.INPUTDATE.substring(0,10)}}
                  </div>
                </div>
              </div>
            </group>-->
            <div v-for="(item, i) in list" :key="i">
              <swipeout>
                <swipeout-item>
                  <div slot="right-menu">
                    <swipeout-button
                      type="warn"
                      v-if="item.INPUTERNAME == userName && item.FLAG == '0'"
                      @click.native="cancelInspection(item.GUID)"
                    >撤销</swipeout-button>
                    <swipeout-button type="default" v-else>撤销</swipeout-button>
                  </div>
                  <div
                    slot="content"
                    style="display:flex;border: 1px solid #f5f5f5;"
                    @click="openInfo(item)"
                  >
                    <div
                      class="more-box"
                      style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;width:100%"
                    >
                      <div class="project_style">
                        <span style="display:inline-block">{{item.PROJECTNAME}}</span>
                      </div>
                      <div class="state_time_style">
                        <div class="fill_user">
                          <span class="gray-label" style="margin-right: 10px;">填写人:</span>
                          {{item.INPUTERFULLNAME}}
                        </div>
                        <div class="fill_time">
                          <span class="gray-label" style="margin-right: 5px;">填写时间:</span>
                          {{item.INPUTDATE.substring(0,10)}}
                        </div>
                      </div>
                    </div>
                  </div>
                </swipeout-item>
              </swipeout>
            </div>
          </div>

          <div v-if="flagR">
            <group v-for="(item, i) in listR" gutter="-1px" :key="i">
              <div title :border-intent="false" @click="openInfoR(item)">
                <div
                  class="more-box"
                  style="margin-left: 30px;margin-right: 30px;margin-bottom: 15px;margin-top: 15px;"
                >
                  <!-- <div class="box-bar">
              <div style="font-size:16px">{{item.HAZARDCLAUSE}}</div>
                  </div>-->
                  <div class="project_style">
                    <!-- <span class="gray-label" style="margin-right: 10px;"></span> -->
                    <!-- <span style="margin-right: 26px;margin-left: 46px;display:inline-block">{{item.INPUTERFULLNAME}}填写的安全检查表单</span> -->
                    <span style="display:inline-block">{{item.PRJNAME}}</span>
                    <!-- <span class="gray-label" style="margin-right: 10px;">填写人</span>
                    <span class="hidanger-chosetaskfontshow">{{item.INPUTERFULLNAME}}</span>-->
                  </div>
                  <!-- <div style="margin-top: 8px;">
              <span class="gray-label" style="margin-right: 10px;">当前环节</span>
              {{item.CONSTURCTPRO}}
                  </div>-->
                  <div class="fill_user" style="margin-top: 8px;">
                    <span class="gray-label" style="margin-right: 10px;">填写人:</span>
                    {{item.INPUTERFULLNAME}}
                  </div>
                  <div class="state_time_style">
                    <div name="state">
                      <img
                        src="@/assets/img/待整改@2x.png"
                        style="height: 24px;"
                        v-if="item.STATE=='未确认'"
                      />
                      <img
                        src="@/assets/img/整改中@2x.png"
                        style="height: 24px;"
                        v-if="item.STATE=='整改中'"
                      />
                      <img
                        src="@/assets/img/暂存@2x.png"
                        style="height: 24px;"
                        v-if="item.STATE=='暂存'"
                      />
                      <img
                        src="@/assets/img/已整改@2x.png"
                        style="height: 24px;"
                        v-if="item.STATE=='已完成'"
                      />
                    </div>
                    <div class="fill_time" style="margin-top: 8px;  ">
                      <span class="gray-label" style="margin-right: 5px;">填写时间:</span>
                      {{item.INPUTDATE.substring(0,10)}}
                    </div>
                  </div>
                </div>
              </div>
            </group>
          </div>
        </scroller>
      </v-touch>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { Swipeout, SwipeoutItem, SwipeoutButton } from "vux";
export default {
  name: "hidangerlist",
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton
  },
  mounted() {
    this.checkSelectR();
    // this.getData((res)=>{
    //   if (res.status == '200' && res.data.datas.length > 0) {
    //         this.list = [...this.list, ...res.data.datas]//TODO 啥意思
    //         this.page++;
    //         done()
    //       } else {
    //         done(true)//有错误的情况或者没有记录，传参true
    //       }
    // },()=>{});
    this.getDataR(
      res => {
        //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
        if (res.status == "200" && res.data.datas.length > 0) {
          this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
          this.pageR++;
          done();
        } else {
          done(true); //有错误的情况或者没有记录，传参true
        }
      },
      () => {
        done(true);
      }
    );
  },
  data() {
    return {
      list: [],
      listR: [],
      page: 1,
      pageR: 1,
      keyword: "",
      createPop: false, //弹出层是否创建
      loading: false, //下拉刷新时禁止无限加载
      pro: this.$route.query.pro,
      proId: this.$route.query.proId,
      site: this.$route.query.site,
      pmid: this.$route.query.pmid,
      pmname: this.$route.query.pmname,
      guid: "",
      flagC: true,
      flagR: false,
      checkSelect: "",
      qualityArr: this.$store.state.qualityArr,
      userName: this.$store.state.user.loginId,
      pmname_back: this.$route.query.pmname_back, //整改单选项目时返回的项目部名称
      pmid_back: this.$route.query.pmid_back, //整改单选项目时返回的项目id
      inspectionTitle:
        this.$route.query.pro === undefined
          ? "全部项目"
          : this.$route.query.pro,
      rectifyTitle: "全部项目",
      isSelected: this.$route.query.isSelected === undefined ? false : this.$route.query.isSelected
    };
  },
  methods: {
    selectPro(val) {
      this.isSelected = true;
      if (this.flagC) {
        this.proId = val.id;
        this.pmname = val.pname;
        this.pmid = val.pid;
        this.pro = val.name;
        this.site = val.site;
        this.inspectionTitle = val.name;
        this.page = 1;
        this.list = [];
        this.getData(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
              this.page++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {}
        );
      }
      if (this.flagR) {
        this.rectifyTitle = val.name;
        this.pmname_back = val.name;
        this.pmid_back = val.id;
        this.pageR = 1;
        this.listR = [];
        this.getDataR(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
              this.pageR++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {}
        );
      }
    },
    selectAllPro(val) {
      if (this.flagC) {
        this.inspectionTitle = val;
        this.proId = 0;
        this.page = 1;
        this.list = [];
        this.getData(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
              this.page++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {}
        );
      }
      if (this.flagR) {
        this.rectifyTitle = val;
        this.pmid_back = 0;
        this.pageR = 1;
        this.listR = [];
        this.getDataR(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
              this.pageR++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {}
        );
      }
    },
    cancelInspection(GUID) {
      const _this = this;
      this.$vux.confirm.show({
        title: "提示",
        content: "确认撤销？",
        onConfirm() {
          var params =
            '{"_method":"formService.deleteFormData","requestEventData":{"eventType":"uniformToolbarEvent","formType":0,"bizObjId":"PMQUALITY_INSPECTION","formId":"PMQUALITY_INSPECTION_list","buttonId":""},"formData":{"objName":"PMQUALITY_INSPECTION","params":[{"GUID":' +
            GUID +
            '}],"pks":["GUID"],"flowBizFields":[]}}';
          _this.$ajax({
            url: _this.COMMON_URL,
            method: "post",
            // data: this.signMD5({
            //   FixJSON: params
            // })
            data: {
              FixJSON: params
            }
          }).then(res => {
            _this.refresh(() => {});
          });
        },
        onCancel() {}
      });
    },
    checkSelectR() {
      if (this.$route.query.flag == 1) {
        this.flagC = false;
        this.flagR = true;
        console.log("换纸");
      } else {
        this.flagC = true;
        this.flagR = false;
        console.log("不换");
      }
    },
    onCheckClick() {
      this.flagC = true;
      this.flagR = false;
      //$(".check").show();
      //console.log(this.flag)
    },
    onRectifyClick() {
      this.flagC = false;
      this.flagR = true;
      //$(".check").hide();
      //console.log(this.flag)
    },
    //切换至离线模式
    changeToOffline() {
      this.$router.push({
        name: "offlinequalitylist",
        path: "/offlinequalitylist"
      });
    },
    onSwipeRight() {
      this.$router.push("/index/home");
    },
    getDataR(callback, failed) {
      // var filter = "STATE <> '废弃'";
      // // debugger
      // //   console.log(this.qualityArr)
      // if (!this.pmid_back) {
      //   filter =
      //     "STATE <> '废弃'" +
      //     (this.qualityArr.includes("0")
      //       ? ""
      //       : "and SYSPRJID IN (" + this.qualityArr.join(",") + ")");
      // } else {
      //   filter = "STATE <> '废弃' AND SYSPRJID='" + this.pmid_back + "'";
      // }
      // var params =
      //   '{"_method":"component.getListData","_param":{"bizObj":"PMQUALITY_RECTIFY","service":"selectMore","fields":"*","filter":' +
      //   '"' +
      //   filter +
      //   '"' +
      //   ',"currentPageIndex":' +
      //   this.pageR +
      //   ',"pageSize":50,"orderList":[{"field":"INPUTDATE","order":"DESC"}],"QueryFormData":""}}';
     var params = {
       _method:"component.getListData",
       _param:{
          bizObj:"PMQUALITY_RECTIFY",
          service:"selectMore",
          fields:"*",
          filter:{
            phone:{}
          },
          currentPageIndex:this.pageR,
          pageSize:50,
          orderList:[{
            field:"INPUTDATE",
            order:"DESC"
          }],
          QueryFormData:""
       }
     }
      this.$ajax({
        method: "post",
        url: this.COMMON_URL, //+ '?_objName=PMQUALITY_RECTIFY&_viewId=PMQUALITY_RECTIFY',
        // data: this.signMD5({
        //   FixJSON: params
        // })
        data: {
          FixJSON:JSON.stringify(params) 
        }
      })
        .then(res => {
          //console.log(res)
          callback(res);
          // this.listR = [...res.data.datas];
        })
        .catch(err => {
          // failed();
        });
    },
    backhome() {
      this.$router.push("/index/home");
    },
    getData(callback, failed) {
      // var filter = "1=1";
      // if (!this.proId) {
      //   filter =
      //     "1=1" +
      //     (this.qualityArr.includes("0")
      //       ? ""
      //       : "and PROJECTID IN (" + this.qualityArr.join(",") + ")");
      // } else {
      //   filter = "PROJECTID='" + this.proId + "'";
      // }
      // var params =
      //   '{"_method":"component.getListData","_param":{"bizObj":"PMQUALITY_INSPECTION","service":"selectMore","fields":"*","filter":' +
      //   '"' +
      //   filter +
      //   '"' +
      //   ',"currentPageIndex":' +
      //   this.page +
      //   ',"pageSize":50,"orderList":[{"field":"INPUTDATE","order":"desc"}],"QueryFormData":""}}';
      
     var params = {
       _method:"component.getListData",
       _param:{
          bizObj:"PMQUALITY_INSPECTION",
          service:"selectMore",
          fields:"*",
          filter:{
            phone:{}
          },
          currentPageIndex:this.page,
          pageSize:50,
          orderList:[{
            field:"INPUTDATE",
            order:"desc"
          }],
          QueryFormData:""
       }
     } 
      this.$ajax({
        method: "post",
        url: this.COMMON_URL, //+ "?_objName=PMQUALITY_INSPECTION&_viewId=PMQUALITY_INSPECTION",
        // data: this.signMD5({
        //   FixJSON: params
        // })
        data: {
          FixJSON:JSON.stringify(params) 
        }
      })
        .then(res => {
          // this.list = [...res.data.datas];
          console.log("213", res);
          callback(res);
        })
        .catch(err => {
          // failed();
        });
    },
    openInfo(item) {
      this.$router.push({
        path: "/qualityReport/InspectionInfo1",
        query: {
          GUID: item.GUID,
          pro: item.PROJECTNAME,
          site: item.CENTERPOSITION,
          pmname: item.PRJNAME
        }
      });
    },
    openInfoR(item) {
      this.$router.push({
        path: "/qualityReport/rectifyInfo1",
        query: { GUID: item.GUID }
      });
    },
    infinite(done) {
      //上划加载方法
      if (this.flagC && !this.isSelected) {
        this.getData(
          res => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...this.list, ...res.data.datas]; //TODO 啥意思
              this.page++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      } else {
        done(true);
      }
      if (this.flagR && !this.isSelected) {
        this.getDataR(
          res => {
            //res.data.datas中的字段都是大写的，res.data.data中的字段有小写的
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...this.listR, ...res.data.datas]; //TODO 啥意思
              this.pageR++;
              done();
            } else {
              done(true); //有错误的情况或者没有记录，传参true
            }
          },
          () => {
            done(true);
          }
        );
      } else {
        done(true);
      }
    },
    refresh(done) {
      this.page = 1;
      this.pageR = 1;
      if (this.flagC) {
        this.getData(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.list = [...res.data.datas];
              this.page++;
              done();
            } else {
              done(true);
            }
            this.loading = false;
          },
          () => {
            done(true);
          }
        );
      }
      if (this.flagR) {
        this.getDataR(
          res => {
            if (res.status == "200" && res.data.datas.length > 0) {
              this.listR = [...res.data.datas];
              this.pageR++;
              done();
            } else {
              done(true);
            }
          },
          () => {
            done(true);
          }
        );
      }
    },
    search(val) {
      this.page = 1;
      this.keyword = val;
      this.getData(
        res => {
          if (res.status == "200" && res.data.datas.length > 0) {
            this.list = [...res.data.datas];
            this.page++;
          } else {
            this.list = [];
          }
        },
        () => {
          this.list = [];
        }
      );
    },
    // dangereport () {
    //   this.$router.push({
    //     path: "/qualityReport/InspectionInfo",
    //     query: this.$route.query
    //   });
    // },

    dangereport() {
      if (this.flagC)
        if (this.checkNetWork()) {
          this.$router.push({
            path: "/qualityReport/InspectionInfo",
            query: {
              centerPosition: this.site,
              pro: this.pro,
              proId: this.proId,
              pmname: this.pmname,
              pmid: this.pmid
            }
          });
        } else {
          //执行离线状态时的任务
          const _this = this;
          this.$vux.confirm.show({
            // 组件除show外的属性
            title: "提示",
            content: "当前手机处于离线状态，确定启用离线功能？",
            onCancel() {},
            onConfirm() {
              _this.$router.push({
                path: "/qualityReport/InspectionInfo",
                query: {
                  centerPosition: _this.site,
                  pro: _this.pro,
                  proId: _this.proId,
                  pmname: _this.pmname,
                  pmid: _this.pmid
                }
              });
            }
          });
        }
      else{
        if (this.checkNetWork()) {
            this.$router.push({
              path: "/qualityReport/rectifyInfo",
              query: { pro: this.pmname_back, proId: this.pmid_back }
            });
        } else {
           this.$vux.confirm.show({
            // 组件除show外的属性
            title: "提示",
            content: "当前手机处于离线状态，质量整改单暂无离线功能！",
            showCancelButton:false,
          });
        }
        
      }
    },
    changeType(val) {
      this.page = 1;
      this.currentTab = val;
      this.list = [];
      this.$refs.taskScroller.finishInfinite(false);
    },
    showPro(pro) {
      return !!pro ? pro : "全部项目";
    }
  },

  computed: {
    row() {
      //页面中使用row来指代当前记录
      return this.$store.state.currentRow;
    }
  },
  watch: {
    proId: function(newId, old, Id) {}
  }
};
</script>

<style scoped>
/* .transition-view /deep/ .vux-header .vux-header-left .left-arrow:before {
  border-color: rgb(35, 90, 230);
}
.transition-view /deep/ .vux-header {
  background-color: rgb(255, 255, 255) !important;
}
.transition-view .vux-header /deep/ .vux-header-title {
  color: #262a34;
} */
.card {
  background: #fff;
  margin: 10px 16px;
  padding: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.card-title {
  font-size: 18px;
}
.warning {
  color: red;
  padding: 0 5px;
  background-color: pink;
  text-align: center;
  width: 140px;
  line-height: 30px;
  font-size: 14px;
}

.gray-label {
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}

#headeright {
  position: absolute;
  right: 0px;
  top: 5px;
  display: block;
  font-size: 14px;
  line-height: 21px;
  width: 20px;
  height: 20px;
}
.box-bar:before {
  content: "";
  display: block;
  height: 17px;
  position: absolute;
  border-left: 4px solid #a7aeff;
  left: 14px;
  top: 18px;
}
.hidanger-chosetaskfontshow {
  max-width: 70px;
  overflow-x: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
  /*设置overflow后基线位置改变，因此需要调整*/
  vertical-align: bottom;
}
.changeToOffline {
  margin-right: auto;
  width: 25px;
  height: 25px;
  /* margin-top: 10px; */
}
.add_form {
  position: absolute;
  height: 50px;
  width: 90%;
  top: 90%;
  z-index: 999;
  left: 5%;
  background: #4d86ff;
  color: #ffffff;
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add_form_new {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 80%;
  z-index: 999;
  left: 80%;
  background: rgba(77, 134, 255, 1);
  box-shadow: 0px 1px 13px 0px rgba(79, 132, 220, 0.6);
  border-radius: 50%;
  color: #ffffff;
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  line-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* .transition-view .vux-header .vux-header-left /deep/.left-arrow:before{
   border: 1px solid rgb(228, 15, 15);
 } */
.fill_time {
  /* margin-top: 8px; */
  margin-left: auto;
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}
.fill_user {
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(175, 175, 175, 1);
  line-height: 20px;
}
.state_time_style {
  display: flex;
  margin-top: 8px;
}
.sup {
  width: 100%;
  height: 10px;
  border-radius: 0;
  background-color: #f5f5f5;
}
.project_style {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 400;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
  margin-top: 8px;
}
.select_pro {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 600;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
}
.selectPro /deep/ .my-cell .my-cell-title .weui-label {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 600;
  color: rgba(25, 25, 25, 1);
  line-height: 20px;
}
</style>
